<template>
  <el-card shadow="never" class="search-form-card">
    <el-form inline>
      <el-row :gutter="10">
        <el-col :span="item.colSpan || 6" v-for="item in searchList" :key="(item.prop + item.name)">
          <el-form-item :label="item.label" style="width: 100%">
            <el-select
                :filterable="item.filterable"
                :clearable="item.clearable" v-if="item.name === 'select'" v-model="searchParams[item.prop]" :multiple="item.multiple" @change="val => $emit('change', {
                prop: item.prop,
                val
                })"
                placeholder="请选择">
              <el-option
                  v-for="optionItem in item.options"
                  :key="optionItem.value"
                  :value="optionItem.value"
                  :label="optionItem.label"
              />
            </el-select>
            <el-select-tree
                v-if="item.name === 'selectTree'"
                v-model="searchParams[item.prop]"
                :multiple="item.multiple"
                clearable
                default-expand-all
                :check-strictly="item.checkStrictly"
                :node-key="item.nodeKey || 'id'"
                :props="item.keys"
                :data="item.options"
                @change="val => $emit('change', {
              prop: item.prop,
              val
            })"
            />
            <el-input v-if="item.name === 'input'" v-model="searchParams[item.prop]" placeholder="请输入" :type="item.type" />
            <el-date-picker
                v-if="item.name === 'date'"
                v-model="searchParams[item.prop]"
                :type="item.dateType"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :value-format="item.valueFormat || 'yyyy-MM-dd HH:mm:ss'"
                :style="{width: item.width ||  '360px'}"
            />
          </el-form-item>
        </el-col>
        <el-form-item>
          <el-button type="primary" @click="onSearch">搜索</el-button>
          <el-button v-if="searchList.length" @click="onReset">重置</el-button>
          <slot name="button"></slot>
        </el-form-item>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
export default {
  name: 'SearchForm',
  props: {
    searchList: {
      type: Array,
      default: () => []
    },
    searchParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {}
  },
  methods: {
    onSearch() {
      this.$emit('search')
    },
    onReset() {
      this.$emit('reset')
    }
  }
}
</script>

<style lang="scss">
.search-form-card {
  .el-form {
    width: 100%;
    .el-form-item__label {
      color: #000000;
    }
  }
  .el-card__body {
    padding-bottom: 2px;
  }
}
</style>
